Client-side এবং Server-side Validation

Web Development - এক্সটিজেএস (ExtJS) - ExtJS Form এবং Form Validation |

Validation হল ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ, যা নিশ্চিত করে যে ব্যবহারকারী শুধুমাত্র সঠিক তথ্য প্রদান করছে। ExtJS তে client-side validation এবং server-side validation দুটি ব্যবহৃত হয়, যেখানে client-side validation ব্যবহারকারীর ইনপুট ফর্মের আগে চেক করা হয় এবং server-side validation সার্ভার সাইডে ইনপুট যাচাই করা হয়। দুটোই নিরাপত্তা এবং ডেটার স্বচ্ছতা বজায় রাখার জন্য অপরিহার্য।


১. Client-side Validation

Client-side validation হল ফর্মের ইনপুট ডেটা যাচাই করার একটি প্রক্রিয়া যা ক্লায়েন্ট (ব্যবহারকারী) এর সিস্টেমে রান করে, সার্ভারের আগে। এটি সাধারণত দ্রুত ইনপুট যাচাই করার জন্য ব্যবহৃত হয় এবং ব্যবহারকারীদের দ্রুত প্রতিক্রিয়া প্রদান করে। ExtJS ফ্রেমওয়ার্কে Ext.form.field (যেমন Ext.form.field.Text, Ext.form.field.Number, ইত্যাদি) এর মাধ্যমে ফিল্ড ভ্যালিডেশন করা হয়।

Client-side Validation এর উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'Login Form',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false, // ফিল্ডটি খালি না রাখার জন্য
            minLength: 3, // মিনি দৈর্ঘ্য ৩
            maxLength: 20, // ম্যাক্স দৈর্ঘ্য ২০
            vtype: 'email' // ইমেইল ভ্যালিডেশন
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: 'Password',
            inputType: 'password',
            allowBlank: false, // ফিল্ডটি খালি না রাখার জন্য
            minLength: 6 // পাসওয়ার্ডের মিনি দৈর্ঘ্য ৬
        }
    ],
    buttons: [{
        text: 'Login',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {  // ফর্ম ভ্যালিডেশন চেক
                Ext.Msg.alert('Success', 'Form is valid');
            } else {
                Ext.Msg.alert('Error', 'Please fill all the required fields');
            }
        }
    }]
});

এখানে:

  • allowBlank: false: ব্যবহারকারী অবশ্যই একটি মান ইনপুট করতে হবে।
  • minLength এবং maxLength: ইনপুটের দৈর্ঘ্য নির্ধারণ করা।
  • vtype: 'email': ইমেইল ইনপুটের জন্য একটি বিল্ট-ইন ভ্যালিডেশন।
  • isValid(): ফর্মের সব ফিল্ড ভ্যালিড কিনা তা চেক করে।

Custom Validation:

আপনি যদি একটি কাস্টম ভ্যালিডেশন যুক্ত করতে চান, তাহলে validator প্রপার্টি ব্যবহার করতে পারেন।

{
    xtype: 'textfield',
    fieldLabel: 'Age',
    name: 'age',
    validator: function(value) {
        if (value < 18) {
            return 'You must be at least 18 years old';
        }
        return true;
    }
}

২. Server-side Validation

Server-side validation হল ইনপুট যাচাই করার প্রক্রিয়া যা সার্ভারে চলে, যেখানে ব্যবহারকারীর ইনপুট সার্ভারে পাঠানো হয় এবং সেখানে যাচাই করা হয়। এটি নিরাপত্তার জন্য গুরুত্বপূর্ণ, কারণ ক্লায়েন্ট সাইড ভ্যালিডেশন সহজে বাইপাস করা যায় এবং এটি ডেটার ইন্টিগ্রিটি রক্ষা করে।

Server-side Validation প্রক্রিয়া:

  1. Client-side Validation: ব্যবহারকারী প্রথমে ফর্ম ইনপুট করে।
  2. Ajax Request: ফর্ম ডেটা সার্ভারে পাঠানো হয় Ajax রিকোয়েস্ট এর মাধ্যমে।
  3. Server-side Validation: সার্ভার ডেটা যাচাই করে এবং যদি সব ঠিক থাকে, সফল রেসপন্স পাঠানো হয়।
  4. Response: ক্লায়েন্টে সফল বা ব্যর্থতার মেসেজ রিটার্ন করা হয়।

Server-side Validation এর উদাহরণ:

Ext.create('Ext.form.Panel', {
    title: 'Login Form',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: 'Password',
            inputType: 'password',
            allowBlank: false
        }
    ],
    buttons: [{
        text: 'Login',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                // Ajax রিকোয়েস্ট সার্ভারে পাঠানো
                Ext.Ajax.request({
                    url: 'validateLogin.php',  // সার্ভার সাইড স্ক্রিপ্ট
                    method: 'POST',
                    params: form.getValues(),
                    success: function(response) {
                        var result = Ext.decode(response.responseText);
                        if (result.success) {
                            Ext.Msg.alert('Success', 'Login successful');
                        } else {
                            Ext.Msg.alert('Failure', 'Invalid username or password');
                        }
                    },
                    failure: function() {
                        Ext.Msg.alert('Error', 'Server error');
                    }
                });
            }
        }
    }]
});

এখানে:

  • Ext.Ajax.request ব্যবহার করা হয়েছে সার্ভারের সাথে যোগাযোগ করার জন্য।
  • সার্ভারে validateLogin.php ফাইলকে POST রিকোয়েস্ট পাঠানো হচ্ছে।
  • সার্ভার থেকে পাওয়া রেসপন্সের ভিত্তিতে সফল বা ব্যর্থতার মেসেজ প্রদর্শন করা হচ্ছে।

PHP (Server-side) Validation উদাহরণ:

<?php
// validateLogin.php
$username = $_POST['username'];
$password = $_POST['password'];

// ডাটাবেস চেক বা অন্যান্য সার্ভার সাইড ভ্যালিডেশন
if ($username == 'admin' && $password == 'password') {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
?>

এখানে:

  • সার্ভারে $_POST দিয়ে ইনপুট ডেটা গ্রহন করা হচ্ছে এবং যাচাই করা হচ্ছে।
  • সার্ভারের রেসপন্স JSON ফরম্যাটে ফেরত পাঠানো হচ্ছে, যা ক্লায়েন্টে Ajax রিকোয়েস্টের মাধ্যমে প্রাপ্ত হচ্ছে।

সারাংশ

  1. Client-side Validation:
    • ফর্মের ইনপুট ক্লায়েন্ট সাইডে যাচাই করা হয়।
    • দ্রুত প্রতিক্রিয়া এবং ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।
    • সিকিউরিটি জন্য আদর্শ নয়, কারণ ব্যবহারকারী কোডটি বাইপাস করতে পারে।
  2. Server-side Validation:
    • ইনপুট ডেটা সার্ভারে যাচাই করা হয়।
    • নিরাপত্তার জন্য অপরিহার্য, কারণ এটি ব্যবহারকারীর ইনপুটকে সঠিকভাবে যাচাই করে।
    • ক্লায়েন্ট সাইড ভ্যালিডেশন বাইপাস করেও ব্যবহারকারী ডেটা প্রেরণ করতে পারে, তাই এটি সুরক্ষা বাড়ায়।

Client-side validation দ্রুত ইউজার ইন্টারঅ্যাকশন এবং ব্যাচালর চেকিং এর জন্য ব্যবহৃত হয়, এবং Server-side validation ডেটার নিরাপত্তা এবং ইনটিগ্রিটি নিশ্চিত করে।

Content added By
Promotion